<template>
    <div class="title">
        <i class="iconfont icon-chuanganqizhuangtai icon"></i>
        <span>传感器实时数据</span>
    </div>
    <div class="main">
        <div class="main-title">应变： {{ sensor.shake[sensorOneIndex]?.sensorPosition }}</div>
        <el-carousel height="125px" arrow="never" @change="sensorOneChange" :interval="5000">
            <el-carousel-item v-for="item in elLength[0]" :key="item">
                <div class="sensor one" ref="oneRef"></div>
            </el-carousel-item>
        </el-carousel>
        <div class="main-title">振动： {{ sensor.emergency[sensorTwoIndex]?.sensorPosition }}</div>
        <el-carousel height="125px" arrow="never" @change="sensorTwoChange" :interval="5000">
            <el-carousel-item v-for="item in elLength[1]" :key="item">
                <div class="sensor two" ref="twoRef"></div>
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="title" style="margin-top: 15px">
        <i class="iconfont icon-plcshuju icon"></i>
        <span>状态监测</span>
    </div>
    <div class="trend-health">
        <div class="healthy">
            <div class="wrapper"></div>
            <div class="structure">
                <div class="structure-title">
                    <div class="icon">
                        <i class="iconfont icon-yunhangbaozhang"></i>
                    </div>
                    <span>主结构</span>
                </div>
                <div class="line-progress">
                    <span>应变</span>
                    <div class="line">
                        <div class="inner-line"></div>
                        <div class="point" :style="{ left: health.strainValue + '%' }">
                            <i class="iconfont icon-hong" style="color: #4aa6dd"></i>
                        </div>
                    </div>
                    <span>{{ health.strainValue }}%</span>
                </div>
                <div class="line-progress">
                    <span>姿态</span>
                    <div class="line">
                        <div class="inner-line"></div>
                        <div class="point" :style="{ left: health.postureValue + '%' }">
                            <i class="iconfont icon-hong" style="color: #4aa6dd"></i>
                        </div>
                    </div>
                    <span>{{ health.postureValue }}%</span>
                </div>
            </div>
        </div>
        <div class="statistics">
            <div class="statistics-item" v-for="item in health?.healthVibrationResp">
                <span>{{ item.name }}</span>
                <div class="statistics-out-item">
                    <i class="iconfont icon-juantong" style="color: #4aa6dd"></i>
                    <span style="color: #c5d8ff">卷筒</span>
                    <span>{{ item.value }}%</span>
                </div>
                <div class="statistics-out-item">
                    <i class="iconfont icon-zhendong" style="color: #4aa6dd"></i>
                    <span style="color: #c5d8ff">振动</span>
                    <span>{{ item.shockSensor }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { nextTick, onUnmounted, ref } from "vue";
import { lineOption, completion } from "../config";
import { getHealth } from "@/service/api/home.js";
import { cloneDeep } from "@/utils/utils.js";
import { mainStore } from "@/store/main";

import echarts from "@/echarts";
import Socket from "@/webSocket";

const store = mainStore();
const sensor = ref({ shake: [], emergency: [] });
const oneRef = ref(null);
const twoRef = ref(null);
const elLength = ref([]);
const socket = new Socket();
const socket1 = new Socket();
socket.connect(`/houduanToQianduan/homeVibration`, (res) => {
    const find = res.noticeInfo.find((item) => item.equipmentCode === store.equipment.equipmentCode);
    sensor.value.emergency = find.homeStatusSensorVibration.slice(0, 7);
    if (elLength.value[1] !== sensor.value.shake.length) elLength.value[1] = sensor.value.emergency.length;
    nextTick(() => {
        twoRef.value.forEach((item, index) => {
            if (!echarts.getInstanceByDom(item)) echarts.init(item);
            const option = cloneDeep(lineOption);
            option.xAxis.data = sensor.value.emergency[index].dateTimeName;
            option.yAxis.name = "{a|加速度（m/s^2）}";
            option.series[0].data = sensor.value.emergency[index].numericValue;
            echarts.getInstanceByDom(item).setOption(option);
        });
    });
});
socket1.connect(`/houduanToQianduan/homeStrain`, (res) => {
    const find = res.noticeInfo.find((item) => item.equipmentCode === store.equipment.equipmentCode);
    sensor.value.shake = find.homeStatusSensor.slice(0, 7);
    if (elLength.value[0] !== sensor.value.shake.length) elLength.value[0] = sensor.value.shake.length;

    nextTick(() => {
        oneRef.value.forEach((item, index) => {
            if (!echarts.getInstanceByDom(item)) echarts.init(item);
            const option = cloneDeep(lineOption);
            option.xAxis.data = sensor.value.shake[index].dateTimeName;
            option.series[0].data = sensor.value.shake[index].numericValue;
            echarts.getInstanceByDom(item).setOption(option);
        });
    });
});
const health = ref({});
getHealth(store.equipment.equipmentCode).then((res) => {
    if (res.code === 200) {
        health.value = res.data;
        completion.series[0].label.formatter = [`{a|${health.value.healthValue}%}`, `{b|整机}`].join("\n");
        completion.series[0].data = [
            { value: 100 - health.value.healthValue, itemStyle: { color: "#557591" } },
            { value: health.value.healthValue, itemStyle: { color: "#4BA6DD" } }
        ];
        const e = echarts.getInstanceByDom(document.querySelector(".wrapper"));
        if (!e) echarts.init(document.querySelector(".wrapper"));
        echarts.getInstanceByDom(document.querySelector(".wrapper")).setOption(completion);
    }
});
const sensorOneIndex = ref(0);
const sensorOneChange = (index) => (sensorOneIndex.value = index);
const sensorTwoIndex = ref(0);
const sensorTwoChange = (index) => (sensorTwoIndex.value = index);

onUnmounted(() => {
    socket.disconnect();
    socket1.disconnect();
});
</script>

<style lang="less" scoped>
.title {
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    border-top: 1px solid rgba(0, 101, 178, 0.5);
    border-bottom: 1px solid rgba(0, 101, 178, 0.5);
    .icon {
        font-size: 24px;
        margin: 0 15px;
    }
}
.main {
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(62, 167, 222, 0) 0%, rgba(62, 167, 222, 0.1) 100%);
    .sensor {
        margin-top: 5px;
        height: 126px;
        width: 316px;
    }
    .main-title {
        margin-top: 10px;
        margin-left: 5px;
        font-size: 14px;
        font-weight: 600;
        color: #fefefe;
    }
    ::v-deep(.el-carousel__indicator.el-carousel__indicator--horizontal.is-active) {
        .el-carousel__button {
            background-color: #4ba6dd;
        }
    }
    ::v-deep(.el-carousel__button) {
        width: 8px;
        height: 2px;
    }
}
.trend-health {
    padding: 10px 0;
    background: linear-gradient(180deg, rgba(62, 167, 222, 0) 0%, rgba(62, 167, 222, 0.1) 100%);
    .healthy {
        display: flex;
        align-items: center;
        .wrapper {
            margin-left: 36px;
            margin-top: 18px;
            width: 90px;
            height: 90px;
        }
        .structure {
            flex: 1;
            margin-left: 24px;
            .structure-title {
                display: flex;
                align-items: center;
                .icon {
                    margin-right: 4px;
                    width: 16px;
                    height: 16px;
                    background: #4ba6dd;
                    text-align: center;
                    line-height: 16px;
                    i {
                        font-size: 13px;
                    }
                }
            }
            .line-progress {
                display: flex;
                align-items: center;
                margin-top: 10px;
                color: #c5d8ff;
                .line {
                    position: relative;
                    margin: 0 10px;
                    width: 64px;
                    height: 4px;
                    background: #224b63;
                    z-index: 1;
                    .inner-line {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background: #4aa6dd;
                        z-index: 2;
                    }
                    .point {
                        position: absolute;
                        top: -7px;
                        width: 16px;
                        height: 16px;
                        z-index: 3;
                        transform: translate(-50%);
                    }
                }
            }
        }
    }
    .statistics {
        font-size: 14px;
        .statistics-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            margin: 0 auto;
            margin-top: 13px;
            width: 271px;
            height: 30px;
            background: rgba(75, 166, 221, 0.15);
            .statistics-out-item {
                display: flex;
                align-items: center;
                span {
                    margin-left: 5px;
                }
            }
        }
    }
}
</style>
